I'm trying to use this function (src/api/)

function getChampionName(champId) {
  axios.get('http://ddragon.leagueoflegends.com/cdn/12.5.1/data/en_US/champion.json')
    .then(({ data }) => {
      let list = data
      let championList = list.data
      for (var i in championList) {
        if (championList[i].key == champId) {
          return championList[i].id
        }
      }
    })
    .catch((err) => console.log(err))
}

export {getChampionName}

In this component (src/components/)

<template>
  <div class="w-72">
    <header class="rounded-tl-lg rounded-tr-lg bg-slate-400 p-0.5">
      <p>Champion's Mastery</p>
    </header>
    <ul class="grid gap-1 rounded-bl-lg rounded-br-lg bg-slate-50 p-0.5">
      <li v-for="champ in masteryData.slice(0,10)" :key="champ.championId">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <img src="https://ddragon.leagueoflegends.com/cdn/12.5.1/img/champion/Karma.png" alt="" class="rounded-lg h-14 w-14">
            <div>
              <p class="font-medium text-center">{{ getChampionName(champ.championId) }}</p>
              <p>Level {{ champ.championLevel }}</p>
            </div>
          </div>
          <p class="text-2xl font-medium">{{ champ.championPoints }} Pts</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import getChampionName from '@/api/search'

export default{
  name: 'MasteryInfo',
  props: [
    'masteryData'
  ],
  methods: {
    getChampionName
  }
}
</script>

But I'm getting this error Method "getChampionName" has type "undefined" in the component definition. and don't know what does it mean.